import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  Text,
  FlatList,
  Image,
  TouchableOpacity
} from 'react-native'

import { connect } from 'react-redux'
import HeaderDefault from '../../components/header/HeaderDefault'
import { theme_app, theme_text } from '../../utils/appTheme'
import { getPatientOfMyWard } from '../../netServer/signs_net'
import Toast from 'react-native-simple-toast'

class EveTumbleList extends Component {
  constructor(props) {
    super(props)
    this.state = { patientList: [] }
  }
  static navigationOptions = ({ navigation }) => ({
    header: (
      <HeaderDefault
        backBtnOnPress={navigation.goBack}
        title={navigation.state.params.tittle}
      />
    )
  })

  componentDidMount() {
    this._loadPatinetListWithUserName()
  }

  _loadPatinetListWithUserName = () => {
    let paramss = new FormData()
    paramss.append('userName', this.props.user_info.user_name)
    getPatientOfMyWard(paramss, resp => {
      let { code, data = [], msg } = resp

      if (code == '0') {
        this.setState({
          patientList: data
        })
      } else {
        Toast.showWithGravity(msg, 0.3, Toast.CENTER)
      }
    })
  }

  _renderItem = ({ item }) => {
    let {
      name,
      bed_no,
      sex,
      age,
      allergy,
      gradeName,
      inhosp_no,
      days = null,
      charge_type
    } = item
    return (
      <TouchableOpacity
        onPress={() => {
          if (this.props.navigation.state.params.tittle === '跌倒、坠床评估') {
            this.props.navigation.navigate('EveTumbleDetail', { pinfo: item })
          } else if (this.props.navigation.state.params.tittle === '一般情况') {
            this.props.navigation.navigate('EveUsuallyDetail', { pinfo: item })
          } else if (this.props.navigation.state.params.tittle === 'MNA量') {
            this.props.navigation.navigate('EveMNADetail', { pinfo: item })
          } else if (this.props.navigation.state.params.tittle === '计时测试') {
            this.props.navigation.navigate('EveTimingTestDetail', {
              pinfo: item
            })
          }
        }}
      >
        <View
          style={{
            width: screenWidth,
            height: 100,
            borderBottomColor: '#efefef',
            borderBottomWidth: 1,

            backgroundColor: 'white'
          }}
        >
          <View
            style={{
              width: screenWidth,
              height: 40,
              paddingLeft: 16,
              paddingRight: 16,
              alignItems: 'center',
              flexDirection: 'row',
              justifyContent: 'space-between'
            }}
          >
            <Text style={{ fontSize: 16 }}>{name}</Text>
            <Text>{bed_no}</Text>
          </View>

          <View
            style={{
              width: screenWidth,
              height: 30,
              paddingLeft: 16,
              paddingRight: 16,
              alignItems: 'center',
              flexDirection: 'row',
              justifyContent: 'space-between'
            }}
          >
            <Text>
              {sex == 1 ? '男' : '女'}/{age}
            </Text>
            <Text>{inhosp_no}</Text>
            <Text>{days}</Text>
            <Text>{charge_type}</Text>
          </View>

          <View
            style={{
              width: screenWidth,
              height: 30,
              paddingLeft: 16,
              paddingRight: 16,
              alignItems: 'center',
              flexDirection: 'row'
            }}
          >
            <Text style={{ width: 80, color: 'green' }}>{gradeName}</Text>
            <Text style={{ color: 'red' }}>{allergy}</Text>
          </View>
        </View>
      </TouchableOpacity>
    )
  }

  _keyExtractor = (item, index) => item.patient_no

  _separator = () => {
    return <View style={{ height: 1, backgroundColor: '#efefef' }} />
  }

  render() {
    return (
      <View style={styles.container}>
        {/* <View style={{ flex: 1 }} /> */}
        <FlatList
          style={{ flex: 1 }}
          ItemSeparatorComponent={this._separator}
          data={this.state.patientList}
          keyExtractor={this._keyExtractor}
          renderItem={this._renderItem}
        />
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme_app.bg_color
  },
  lineStyle: {
    width: screenWidth - 120,
    height: 40,
    flexDirection: 'row',
    alignItems: 'center'
  }
})

function select(store) {
  return { user_info: store.userInfo.user_info }
}

export default connect(select)(EveTumbleList)
